<template>
  <a-card class="basic-info-card" title="基础信息" :loading="loading">
    <template #extra>
      <a-tag :color="getStatusColor(data.tradeStatus || data.status)">{{ getStatusText(data.tradeStatus || data.status) }}</a-tag>
    </template>
    
    <a-descriptions :column="2" size="medium" bordered>
      <a-descriptions-item label="企业名称">
        {{ data.enterpriseAccount?.enterpriseName || '-' }}
      </a-descriptions-item>
      <a-descriptions-item label="联系方式">
        {{ data.enterpriseAccount?.enterpriseMobile || '-' }}
      </a-descriptions-item>
      <a-descriptions-item label="项目名称">
        {{ data.projectName || '-' }}
      </a-descriptions-item>
      <a-descriptions-item label="项目地址">
        {{ data.projectLocation || '-' }}
      </a-descriptions-item>
      <a-descriptions-item label="项目类型">
        {{ getProjectTypeText(data.projectType) }}
      </a-descriptions-item>
      <a-descriptions-item label="项目金额">
        {{ data.money ? `${data.money}万元` : '-' }}
      </a-descriptions-item>
      <a-descriptions-item label="购买理由">
        {{ data.reason || '-' }}
      </a-descriptions-item>
      <a-descriptions-item label="市储备库指标">
        {{ data.reserveArea ? `${data.reserveArea}亩` : '-' }}
      </a-descriptions-item>
      <a-descriptions-item label="省级公益林">
        {{ data.publicForestArea ? `${data.publicForestArea}亩` : '-' }}
      </a-descriptions-item>
      <a-descriptions-item label="申请时间">
        {{ data.applicationTime || '-' }}
      </a-descriptions-item>
      <a-descriptions-item label="申请人">
        {{ data.enterpriseAccount?.enterprisePerson || '-' }}
      </a-descriptions-item>
      <a-descriptions-item label="项目情况" :span="2">
        {{ data.projectSituation || '-' }}
      </a-descriptions-item>
    </a-descriptions>
      
      <!-- 项目红线图 -->
      <div v-if="data.redlineMapFile" class="info-row full-width">
        <div class="info-item">
          <label class="info-label">项目红线图：</label>
          <div class="info-value">
            <div class="redline-display">
              <div class="redline-item">
                <div class="redline-preview">
                  <a-image
                    :src="data.redlineMapFile.fileUrl"
                    :preview="true"
                    width="240"
                    height="180"
                    fit="cover"
                    class="redline-image"
                  />
                  <div class="image-overlay">
                    <a-button-group size="small">
                      <a-button type="primary" @click="previewFile(data.redlineMapFile)">
                        <template #icon><IconEye /></template>
                        预览
                      </a-button>
                      <a-button @click="downloadFile(data.redlineMapFile)">
                        <template #icon><IconDownload /></template>
                        下载
                      </a-button>
                    </a-button-group>
                  </div>
                </div>
                <div class="redline-info">
                  <div class="file-name">{{ data.redlineMapFile.fileName }}</div>
                  <div class="file-size">{{ formatFileSize(data.redlineMapFile.fileSize) }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 相关附件 -->
      <div v-if="data.otherFilesVO && data.otherFilesVO.length > 0" class="info-row full-width">
        <div class="info-item">
          <label class="info-label">相关附件：</label>
          <div class="info-value">
            <div class="attachments-grid">
              <div v-for="file in data.otherFilesVO" :key="file.fileId" class="attachment-card">
                <div class="attachment-preview" v-if="isImageFile(file.fileName)">
                  <a-image
                    :src="file.fileUrl"
                    :preview="true"
                    width="120"
                    height="90"
                    fit="cover"
                    class="attachment-image"
                  />
                  <div class="preview-overlay">
                    <a-button-group size="mini">
                      <a-button type="primary" @click="previewFile(file)">
                        <template #icon><IconEye /></template>
                      </a-button>
                      <a-button @click="downloadFile(file)">
                        <template #icon><IconDownload /></template>
                      </a-button>
                    </a-button-group>
                  </div>
                </div>
                <div class="attachment-icon-wrapper" v-else>
                  <div class="attachment-icon">
                    <IconFile class="file-icon" />
                  </div>
                </div>
                <div class="attachment-content">
                  <div class="attachment-name" :title="file.fileName">{{ file.fileName }}</div>
                  <div class="attachment-size">{{ formatFileSize(file.fileSize) }}</div>
                  <div class="attachment-actions">
                    <a-button size="mini" type="primary" @click="previewFile(file)">
                      <template #icon><IconEye /></template>
                      预览
                    </a-button>
                    <a-button size="mini" @click="downloadFile(file)">
                      <template #icon><IconDownload /></template>
                      下载
                    </a-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
  </a-card>
</template>

<script setup>
import { getCurrentInstance } from 'vue';
import { Message } from '@arco-design/web-vue';
import {
  IconDownload,
  IconEye,
  IconFile,
  IconFileImage
} from '@arco-design/web-vue/es/icon';

// 定义props
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  loading: {
    type: Boolean,
    default: false
  }
});

// 全局实例
const { proxy } = getCurrentInstance();

// 字典数据
const dicts = proxy.LoadDicts([proxy.DICT.lindiProjectType, proxy.DICT.lindiTradeStatus]);

// 获取状态颜色
const getStatusColor = (status) => {
  if (!status || !dicts[proxy.DICT.lindiTradeStatus]) {
    return 'gray';
  }
  const dict = dicts[proxy.DICT.lindiTradeStatus].find(d => String(d.dictKey) === String(status));
  return dict?.dictClass || 'gray';
};

// 获取状态文本
const getStatusText = (status) => {
  if (!status || !dicts[proxy.DICT.lindiTradeStatus]) {
    return '未知状态';
  }
  const dict = dicts[proxy.DICT.lindiTradeStatus].find(d => String(d.dictKey) === String(status));
  return dict?.dictValue || '未知状态';
};

// 判断是否为图片文件
const isImageFile = (fileName) => {
  if (!fileName) return false;
  const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp'];
  const extension = fileName.toLowerCase().substring(fileName.lastIndexOf('.'));
  return imageExtensions.includes(extension);
};

// 格式化文件大小
const formatFileSize = (size) => {
  if (!size) return '-';
  const sizeNum = parseInt(size);
  if (sizeNum < 1024) {
    return sizeNum + ' B';
  } else if (sizeNum < 1024 * 1024) {
    return (sizeNum / 1024).toFixed(1) + ' KB';
  } else {
    return (sizeNum / (1024 * 1024)).toFixed(1) + ' MB';
  }
};

// 下载文件
const downloadFile = (file) => {
  if (!file || !file.fileUrl) {
    Message.error('文件链接无效');
    return;
  }
  
  const link = document.createElement('a');
  link.href = file.fileUrl;
  link.download = file.fileName || '下载文件';
  link.target = '_blank';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

// 预览文件
const previewFile = (file) => {
  if (!file || !file.fileUrl) {
    Message.error('文件链接无效');
    return;
  }
  window.open(file.fileUrl, '_blank');
};

// 获取项目类型文本
const getProjectTypeText = (projectType) => {
  if (!projectType || !dicts[proxy.DICT.lindiProjectType]) {
    return '-';
  }
  const dict = dicts[proxy.DICT.lindiProjectType].find(d => String(d.dictKey) === String(projectType));
  return dict ? dict.dictValue : '-';
};
</script>

<style scoped>
.basic-info-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.info-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.info-row.full-width {
  grid-template-columns: 1fr;
}

.info-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.info-label {
  font-weight: 500;
  color: #666;
  min-width: 100px;
  flex-shrink: 0;
}

.info-value {
  color: #333;
  flex: 1;
  word-break: break-all;
}



/* 红线图展示样式 */
.redline-display {
  margin-top: 12px;
}

.redline-item {
  display: inline-block;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e5e6eb;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.redline-item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.redline-preview {
  position: relative;
  overflow: hidden;
}

.redline-image {
  border-radius: 0;
  display: block;
  transition: transform 0.3s ease;
}

.redline-preview:hover .redline-image {
  transform: scale(1.05);
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.redline-preview:hover .image-overlay {
  opacity: 1;
}

.redline-info {
  padding: 12px 16px;
  text-align: center;
}

.file-name {
  font-weight: 500;
  color: #1d2129;
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-size {
  font-size: 12px;
  color: #86909c;
}

/* 附件网格展示样式 */
.attachments-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.attachment-card {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e5e6eb;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.attachment-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.attachment-preview {
  position: relative;
  overflow: hidden;
}

.attachment-image {
  width: 100%;
  height: 90px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.attachment-preview:hover .attachment-image {
  transform: scale(1.05);
}

.preview-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.attachment-preview:hover .preview-overlay {
  opacity: 1;
}

.attachment-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90px;
  background: linear-gradient(135deg, #f7f8fa 0%, #e5e6eb 100%);
}

.attachment-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.file-icon {
  font-size: 24px;
  color: #165dff;
}

.attachment-content {
  padding: 12px 16px;
}

.attachment-name {
  font-weight: 500;
  color: #1d2129;
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-size {
  font-size: 12px;
  color: #86909c;
  margin-bottom: 8px;
}

.attachment-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

@media (max-width: 768px) {
  .info-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .info-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .info-label {
    min-width: auto;
  }
}
</style>